<style lang="less" scoped>
.search {
    width: 20%;
}

.list-group {
    margin-top: 0.5em;
    width: 60%;
    line-height: 1.8em;
}
</style>
<template>
    <div class="order-list">
        <div v-if="list.length">
            <Input v-model="searchCode" icon="search" placeholder="订单检索..." class="search"></Input>
            <ul class="list-group">
                <li class="list-group-item my-item box" v-for="(x,i) of filterData" :key="i" @click="handleLink(x.order_code)">
                    <div class="box-cell-1">
                        <h4>{{x.order_code}}</h4>
                        <p>{{x.demand_deprt_name}}</p>
                        <p>创建时间：{{x.order_date}}</p>
                    </div>
                    <div class="">
                        <Tag type="border" :color="x.color">{{x.status_descp}}</Tag>
                    </div>
                </li>
            </ul>
        </div>
        <div v-else>
            <h4>...</h4>
        </div>
    </div>
</template>
<script>
export default {
    name:"OrderList",
    props: {
        list: Array
    },
    data() {

        return {
            searchCode: '',

        }
    },
    computed: {
        filterData() {
            return filterArr(this.list, this.searchCode)
        }
    },
    watch:{
        "list":"color"
    },
    created(){
       
    },
    mounted() {
       
    },
    methods: {
        handleLink(order_code) {
            this.$store.commit("plusCurrent")
            this.$router.push({ name: "OrderDetailU", params: { order_code } })
        },
        color() {
            this.list.forEach(e => {
                let code = e.status_code
                switch (code) {
                    case "0":
                        e.color = "red"
                        break;
                    case "10":
                        e.color = "green"
                        break;
                    case "20":
                        e.color = "yellow"
                        break;
                    case "30":
                        e.color = "blue"
                        break;

                }
            }, this)
        
        }
    }
}
</script>
